<template>
  <jf-keyboard-fixed mask v-model="data.show" @close="close()">
    <view class="add_comment_box">
      <textarea
        class="add_comment_input"
        :placeholder="$t('index.info.comment')"
        :maxlength="300"
        :focus="data.focus"
        @blur="data.focus = false"
        v-model="data.comment"
        :adjust-position="false"
      ></textarea>
      <view class="add_comment_btns">
        <!-- <view class="add_comment_btn">
					<image src="@/static/images/index/add/icon001.png"></image>
					<image src="@/static/images/index/add/icon002.png"></image>
					<image src="@/static/images/index/add/icon003.png"></image>
				</view> -->
        <view class="add_comment_issue" @click="save()">{{
          $t('index.info.issue')
        }}</view>
      </view>
    </view>
  </jf-keyboard-fixed>
</template>

<script lang="ts" setup>
import { reactive, watchEffect } from 'vue'

const props = withDefaults(
  defineProps<{
    modelValue: boolean
    article: any
    type: number
    info: any
    parent: any
  }>(),
  {
    modelValue: false,
    article: null,
    type: 1,
    info: null,
    parent: null,
  }
)
const emits = defineEmits<{
  (e: 'update:modelValue', status: boolean): void
  (e: 'change'): void
}>()
const data = reactive({
  show: false,
  focus: false,
  comment: undefined,
})

const save = (): void => {
  props.article.saveComment(
    props.parent,
    data.comment,
    props.type === 1 ? undefined : props.info.uid,
    props.type === 1
      ? undefined
      : props.type === 2
      ? props.info.id
      : props.info.cid,
    props.type === 3 ? props.info.id : undefined,
    props.info ? props.info.pid : undefined
  )
  data.show = false
  data.focus = false
  data.comment = undefined
  emits('update:modelValue', false)
  emits('change')
}
const close = (): void => {
  data.focus = false
  emits('update:modelValue', false)
}

watchEffect(() => {
  if (props.modelValue) {
    data.show = true
    data.focus = true
  }
})
</script>

<style lang="scss">
.add_comment_box {
  width: 686rpx;
  background: #ffffff;
  padding: 32rpx;
  border-radius: 32rpx 32rpx 0 0;
  .add_comment_input {
    width: 622rpx;
    height: 200rpx;
    padding: 32rpx;
    border-radius: 32rpx;
    background: #f2f4f6;
    font-weight: 400;
    line-height: 40rpx;
    font-size: 28rpx;
  }
  .add_comment_btns {
    @include layout();
    height: 64rpx;
    margin-top: 32rpx;
    .add_comment_btn {
      @include layout();
      image {
        width: 40rpx;
        height: 40rpx;
        margin-left: 56rpx;
        &:nth-child(1) {
          margin-left: 0;
        }
      }
    }
    .add_comment_issue {
      margin-left: auto;
      line-height: 64rpx;
      padding: 0 32rpx;
      border-radius: 32rpx;
      background: #326aff;
      font-weight: 500;
      color: #ffffff;
      font-size: 32rpx;
    }
  }
}
</style>
